class SortableList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    set data(data) {
        this.setState({data: data});
    }

    dragStart(e) {
        this.dragged = e.currentTarget;
    }

    dragEnd(e) {
        this.dragged.style.display = 'block';
        e.target.classList.remove("drag-up");
        this.over.classList.remove("drag-up");

        e.target.classList.remove("drag-down");
        this.over.classList.remove("drag-down");

        let data = this.state.data;
        let from = Number(this.dragged.dataset.id);
        let to = Number(this.over.dataset.id);
        data.splice(to, 0, data.splice(from, 1)[0]);
        //set newIndex to judge direction of drag and drop
        data = data.map((doc, index) => {
            doc.newIndex = index + 1;
            return doc;
        });
        console.log("data", data);
        this.setState({data: data});
    }

    dragOver(e) {
        e.preventDefault();
        this.dragged.style.display = "none";
        if (e.target.tagName !== "LI") {
            return;
        }
        //判断当前拖拽target 和 经过的target 的 newIndex
        const dgIndex = JSON.parse(this.dragged.dataset.item).newIndex;
        const taIndex = JSON.parse(e.target.dataset.item).newIndex;
        const animateName = dgIndex > taIndex ? "drag-up" : "drag-down";

        if (this.over && e.target.dataset.item !== this.over.dataset.item) {
            this.over.classList.remove("drag-up", "drag-down");
        }

        if (!e.target.classList.contains(animateName)) {
            e.target.classList.add(animateName);
            this.over = e.target;
        }
    }

    addItem(item) {
        let data = this.state.data;
        data.push({
            id: item.id,
            newIndex: data.length + 1,
            title: item.roomTypeName
        });
        this.setState({data: data});
    }

    deleteItem(i) { //重新排序
        this.state.data.splice(i, 1);
        let data = this.state.data;
        for (let i = 0; i < data.length; i++) {
            data[i].newIndex = i + 1;
        }
        this.setState({data: data});
    }

    clean() {
        this.setState({data: []});
    }

    get data() {
        return this.state.data;
    }

    render() {
        const {className, liStyle, ulClassName, ulStyle} = this.props;
        let listItems = this.state.data.map((item, i) => {
            return (
                <li
                    className={className ? className : ''}
                    data-id={i}
                    key={i}
                    style={liStyle ? liStyle : {
                        height: '30px',
                        lineHeight: '30px',
                        padding: '0 5px 0 10px',
                        border: "solid 1px #e6e6e6",
                        margin: "10px 0 10px 0",
                        borderRadius: "0 2px 2px 0",
                        fontSize: '15px'
                    }}
                    draggable='true'
                    onDragEnd={(e) => this.dragEnd(e)}
                    onDragStart={(e) => this.dragStart(e)}
                    data-item={JSON.stringify(item)}
                >{item.newIndex + '. ' + item.title}
                    <div style={{
                        height: '30px',
                        lineHeight: '30px',
                        float: 'right'
                    }}
                         onClick={() => this.deleteItem(i)}>
                        <i className="layui-icon"
                           style={{fontSize: '20px'}}>&#xe640;</i>
                    </div>
                </li>
            )
        });
        return (
            <ul onDragOver={(e) => this.dragOver(e)}
                className={ulClassName ? ulClassName : ''}
                style={ulStyle ? ulStyle : {listStyle: 'none'}}
            >
                {listItems}
            </ul>
        )
    }
}